<template>
	<view class="news-deatail">
		<view class="it-time">
			2019年10月26日 10：20
		</view>
		<view class="news-item">
			<view :class="['user-img', newsFlag ? 'user-img-right' : '']">
				<image src="/static/imgs/public/shopPic-01.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? 'news-text-right' : 'text-right' ]">
				<text>回复@天使的翅膀：所在范围内可以送货上门1。</text>
				<view class="revert">
					<text>天使的翅膀:</text>
					<text>送货上门吗？</text>
				</view>
				
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? '' : 'user-img-right']">
				<image src="/static/imgs/public/shopPic-02.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? '' : 'news-text-right']">
				好的，谢谢
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? 'user-img-right' : '']">
				<image src="/static/imgs/public/shopPic-01.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? 'news-text-right' : 'text-right' ]">
				<text>回复@天使的翅膀：所在范围内可以送货上门2。</text>
				<view class="revert">
					<text>天使的翅膀:</text>
					<text>送货上门吗？</text>
				</view>
				
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? '' : 'user-img-right']">
				<image src="/static/imgs/public/shopPic-02.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? '' : 'news-text-right']">
				好的，谢谢
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? 'user-img-right' : '']">
				<image src="/static/imgs/public/shopPic-01.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? 'news-text-right' : 'text-right' ]">
				<text>回复@天使的翅膀：所在范围内可以送货上门3。</text>
				<view class="revert">
					<text>天使的翅膀:</text>
					<text>送货上门吗？</text>
				</view>
				
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? '' : 'user-img-right']">
				<image src="/static/imgs/public/shopPic-02.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? '' : 'news-text-right']">
				好的，谢谢
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? 'user-img-right' : '']">
				<image src="/static/imgs/public/shopPic-01.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? 'news-text-right' : 'text-right' ]">
				<text>回复@天使的翅膀：所在范围内可以送货上门4。</text>
				<view class="revert">
					<text>天使的翅膀:</text>
					<text>送货上门吗？</text>
				</view>
				
			</view>
		</view>
		
		<view class="news-item">
			<view :class="['user-img', newsFlag ? '' : 'user-img-right']">
				<image src="/static/imgs/public/shopPic-02.png" mode="aspectFill"></image>
			</view>
			<view :class="['news-text', newsFlag ? '' : 'news-text-right']">
				好的，谢谢
			</view>
		</view>
		<!-- 弹出输入框 -->
		<view :class="['gd-input-box', maskFlag ? 'gd-focus' : '']">
				<view class="input-box" >
					<!-- :adjust-position="false" -->
					<input type="text" v-model="newsValue" @focus="onInput"  :placeholder="`回复@`" placeholder-style="font-size: 24upx;color: #999"/>
				</view>
		
				<button type="default" class="send" @click="send">发送</button>
		</view>
		
		<!-- 蒙版 -->
		<!-- <view class="mask" v-show="maskFlag" @click="onMask" @touchmove="onMask"></view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsFlag: false,
				maskFlag: false,
				newsValue: ''
			};
		},
		onShow() {
			// #ifdef APP-PLUS
			this.$common.hideCenterIcon();
			// #endif
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name
			});
			
		},
		methods: {
			onMask() { // 点击蒙版
				this.maskFlag = false
				uni.hideKeyboard()
				
			},
			onInput(){ // 输入框获取焦点
				this.maskFlag = true
			},
			send() { // 发送消息
				uni.showToast({
					title: this.newsValue,
					icon: 'none'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/doenCommon.scss';
</style>
